<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" type="text/css" media="screen"
		  href="../static/css/bootstrap.min.css">
</head>
<body>

<div class="container">
	<ol class="breadcrumb">
		<li><a href="#">用户管理</a></li>
		<li class="active">用户列表</li>
		<li style="float:right">
			<a href="/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	</ol>

	<!-- 主体内容开始 -->
	<!-- 第一行开始 -->
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<!-- 表单开始 -->
			<form action="" class="form-horizontal">
				<!-- panel开始 -->
				<div class="panel panel-info">
					<div class="panel-heading"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</div>
					<!-- panel-body开始 -->
					<div class="panel-body">

						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 ">
								<div class="form-group">
									<label for="number" class="col-sm-3 control-label">用户名</label>
									<div class="col-sm-9">
										<input type="text" class="form-control" name="number"
											   placeholder="用户名">
									</div>
								</div>

							</div>

						</div>

					</div>
					<!-- panel-body结束 -->
					<div class="panel-footer text-right">
						<button type="reset" name="resetBtn" id="resetBtn"
								class="btn btn-warning">重置</button>
						<input type="submit" value="查询" class="btn btn-primary" ></input>
						<button type="button" name="addBtn" class="btn btn-info"
								onclick="location.href='addUser.html'">添加用户</button>
					</div>
				</div>
				<!-- panel结束 -->
			</form>
			<!--表单结束 -->
		</div>

	</div>
	<!-- 第一行结束 -->

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-primary">
				<div class="panel-heading">用户列表</div>
				<table class="table table-bordered table-hover text-center">
					<thead>
					<tr class="info">
						<td>用户名称</td>
						<td>用户密码</td>
						<td>用户身份</td>
					</tr>
					</thead>
					<tbody id="tb-content">

					</tbody>
				</table>

			</div>
		</div>

	</div>

</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>
	//在页面加载的时候 获取所有用户信息数据
	window.onload = function () {

		const url = "/user/list"
		axios.get(url)
				.then(function (res) {
					// console.log(res.data)
					const responseBody = res.data
					if (responseBody.code === 200) {
						//tbody 添加 字符串数据 进行表格渲染
						const users = responseBody.data
						//循环遍历集合
						let str = ""
						for (let i = 0; i < users.length; i++) {
							str += `
									<tr>
										<td>${users[i].number}</td>
										<td>${users[i].password}</td>
										<td>${users[i].identity}</td>
									</tr>
									`
							console.log(str)
						}
						//找元素
						document.getElementById("tb-content").innerHTML = str
					}


				})
	}







</script>